<template>
<!--  <div class="home">-->
<!--    我叫{{name}},今年{{age}},我的电话为{{phoneShow}},我是{{sexShow}}-->
<!--  </div>-->
<div>
  <div style="width: 25%;float: left;">
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <el-submenu index="1" class="el-menu-item" style="width: 150px">
        <template slot="title" style="width: 150px">
          <i >班级管理</i>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">+新建班级</el-menu-item>
          <el-menu-item index="1-1" style="">20移动通信技术3-1班</el-menu-item>
          <el-menu-item index="1-2">20移动通信技术3-2班</el-menu-item>
        </el-menu-item-group>
        <el-menu-item index="1-3">默认班级</el-menu-item>

      </el-submenu>
      <el-menu-item index="2" style="width: 150px">
        <i >教师团队管理</i>
      </el-menu-item>
      <el-menu-item index="3" style="width: 150px">
        <i >操作日志</i>
      </el-menu-item>
    </el-menu>
  </div>
<div style="width: 80%; float: right;">
  <template>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="date"
          label="日期"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="province"
          label="省份"
          width="120">
      </el-table-column>
      <el-table-column
          prop="city"
          label="市区"
          width="120">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址"
          width="300">
      </el-table-column>
      <el-table-column
          prop="zip"
          label="邮编"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
</div>

</div>




</template>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-item:hover {
  color: green !important;
}
</style>

<script>
import {mapState} from "vuex";
import {mapGetters} from "vuex";
export default {
  name: 'Home',
  data() {
    return {
      isCollapse: true,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]

    }
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClick(row) {
      console.log(row);
    }
  },

  // 第一种写法
  // computed:{
  //   name(){
  //     return this.$store.state.name
  //   },
  //   age(){
  //     return this.$store.state.age
  //   }
  // },
  // 第二种写法
  // computed: mapState({
  //   name:state=>state.name,
  //   age:'age'
  // }),
  // 展开运算符方法
  computed: {
    ...mapState((['name', 'age'])),
    ...mapGetters((['phoneShow'])),
    sexShow() {
      return this.$store.getters.sexShow(1)
    }
  }
}
</script>